'use strict';
import React from "react";
import {View, StyleSheet, KeyboardAvoidingView, TextInput, TouchableOpacity, Text} from "react-native";
import Images from "../../asset";
import {Badge} from "teaset";
import ImageView from "./ImageView";
import Button from "./Button";
import ServicesApi from "../../config/ServicesApi";
import {inject, observer} from "mobx-react";
@inject('taskStore')
@observer
class TopicCommentView extends React.Component {

    constructor(props) {
        super(props);
        this.inputData = {
            comment: '',
        };
        this.state = {
            showRightButton: false,
            count: props.count,
            comments_count: props.comments_count,
            like_state: props.like_state,
        }
    }

    componentWillReceiveProps(nextProps: Readonly<P>, nextContext: any): void {
        if (nextProps.count !== this.props.count) {
            this.setState({
                count: nextProps.count,
                comments_count: nextProps.comments_count,
                like_state: nextProps.like_state,
            })
        }
    }

    _onChangeText = (key, text) => {
        this.inputData[key] = text
    };

    _onBlur = () => {
        this.setState({ showRightButton: false })
    };

    _onFocus = () => {
        this.setState({ showRightButton: true })
    };

    //发送评论
    _onPressSend = () => {
        let params = {
            title: '温馨提示',
            detail: '',
            actions: [
                { title: '确定', onPress: () => { AlertManager.hide() } }
            ]
        };
        let reply_content = this.inputData['comment']
        if (!reply_content) {
            params['detail'] = '请输入评论内容';
            AlertManager.show(params)
        } else {
            this.requestComment(reply_content)
        }
    };

    _onPressDZ = async () => {
        const {topic_id} = this.props;
        const result = await Services.post(ServicesApi.FORUM_DZ,{topic_id,create_user:global.secretKey});
        // console.log('点赞返回-------->',result);
        if (result.code === StatusCode.SUCCESS_CODE) {
            let tempCount = parseFloat(this.state.count);
            tempCount++;
            this.setState({ count: tempCount })
        }else {
            ToastManager.show(result.dec || 'error');
        }
    };

    requestComment = async (reply_content) => {
        const { topic_id, reply_module,taskStore} = this.props;
        let url = ServicesApi.REPLY_SAVE;
        let data = {
            topic_id,
            reply_module,
            reply_content,
            create_user: global.secretKey,
            reply_type: 'topic'
        };
        const result = await Services.post(url, data);
        if (result.code === StatusCode.SUCCESS_CODE) {
            ToastManager.show('评论成功');
            this.inputRef.clear();
            this.inputRef.blur();
            this.inputData['comment'] = '';
            await taskStore.saveTask('topic');
            let tempCount = parseFloat(this.state.comments_count);
            tempCount++;
            this.setState({ comments_count: tempCount });
            this._onPressComment();
        }
    };

    //点击评论
    _onPressComment = () => {
        const { topic_id } = this.props;
        RouterHelper.navigate('评论', 'CommentList', { topic_id, reply_module: 'topic' });
    };

    _renderRightView = () => {
        let { showRightButton } = this.state;
        const { count,comments_count, like_state } = this.state;
        // console.log('===========', showRightButton)
        if (showRightButton) {
            return (
                <Button
                    style={styles.sendButton}
                    titleStyle={styles.sendButtonTitle}
                    title='发送'
                    onPress={this._onPressSend}
                />
            )
        } else {
            return (
                <View style={styles.rightRow}>
                    <TouchableOpacity
                        style={styles.badgeCont}
                        onPress={this._onPressComment}
                    >
                        <ImageView
                            style={styles.comment}
                            source={Images.icon_comment_msg}
                        />
                        <Badge
                            maxCount={99}
                            type={'square'}
                            countStyle={styles.countStyle}
                            count={comments_count}
                            style={styles.badge}
                        />
                    </TouchableOpacity>
                    <TouchableOpacity
                        onPress={this._onPressDZ}
                        style={styles.rightContainer}>
                        <ImageView
                            tintColor={like_state == 1 ? null : '#333'}
                            style={styles.dzIcon}
                            source={Images.icon_bull}
                        />
                        <Text style={[styles.dzCount, like_state != 1 && {color: '#333'} ]}>{count}</Text>
                    </TouchableOpacity>
                </View>

            )
        }
    };

    render() {
        return (
            <KeyboardAvoidingView behavior={__IOS__ ? 'position' : 'height'}>
                <View style={styles.bottomInfo}>
                    <TextInput
                        style={styles.commentInput}
                        placeholder={'回复'}
                        ref={(v) => {
                            this.inputRef = v
                        }}
                        onChangeText={(text) => this._onChangeText('comment', text)}
                        onBlur={this._onBlur}
                        onFocus={this._onFocus}
                    />
                    {this._renderRightView()}
                </View>
            </KeyboardAvoidingView>
        );
    }
}

const styles = StyleSheet.create({
    bottomInfo: {
        width: '100%',
        flexDirection: 'row',
        alignItems: 'center',
        paddingHorizontal: 15,
        paddingVertical: 7,
        borderTopWidth: StyleSheet.hairlineWidth,
        borderTopColor: '#dbdbdb',
        backgroundColor: '#fff',
    },
    commentInput: {
        flex: 1,
        height: 35,
        borderRadius: 4,
        padding: 10,
        marginRight: 25,
        fontSize: 13,
        backgroundColor: "#f0f0f0",
        color: '#333',
    },
    sendButton: {
        paddingHorizontal: 14,
        backgroundColor: '#fdac5d',
        paddingVertical: 5,
    },
    sendButtonTitle: {
        color: '#fff',
        fontSize: FontSize(12),
    },
    rightRow: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    rightContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        marginLeft: 10,
    },
    dzCount: {
        marginLeft: 5,
        fontSize: FontSize(15),
        color: "#53a2ff",
    },
    dzIcon: {
        width: 19,
        height: 19,
    },
    badgeCont: {
        // flexDirection: 'row',
        // backgroundColor: '#f00'
    },
    badge: {
        position: 'absolute',
        minWidth: 22,
        borderRadius: 4,
        left: -12,
        top: -8,
        backgroundColor: '#ff7e00',
    },
    comment: {
        width: 21,
        height: 21,
    },
});

export default TopicCommentView